<template>
  <div class="comprivacypolicy">
    <div class="comprivacypolicy-left">{{ title }}</div>
    <div class="comprivacypolicy-right">
      {{ nickname }}
      <van-icon v-if="state == '1'" name="arrow" color="#ccc" />
      <van-switch
        v-if="state == '1.0'"
        v-model="Personalizedcontentchecked"
        @change="Personalizedcontentcheckedch"
      />
      <van-switch
        v-if="state == '1.1'"
        v-model="Personalizedadvertising"
        @change="Personalizedadvertisingch"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
const Personalizedcontentcheckedch = () => {
  localStorage.setItem(
    'Personalizedcontentchecked',
    Personalizedcontentchecked.value ? 'true' : 'false'
  )
}
const Personalizedcontentchecked =
  localStorage.getItem('Personalizedcontentchecked') == 'true' ? ref(true) : ref(false)

const Personalizedadvertising =
  localStorage.getItem('Personalizedadvertising') == 'true' ? ref(true) : ref(false)
const Personalizedadvertisingch = () => {
  localStorage.setItem('Personalizedadvertising', Personalizedadvertising.value ? 'true' : 'false')
}
defineProps({
  title: {
    type: String,
    default: '默认标题'
  },
  state: {
    type: String,
    default: '1'
  },
  nickname: {
    type: String
  }
})
</script>
<style lang="scss" scoped>
.comprivacypolicy {
  width: 100%;
  padding: 0.2rem 0.5rem;
  background-color: white;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.5rem;
  .comprivacypolicy-left {
    width: 55%;
    display: flex;
    margin-left: 0.2rem;
  }
}
</style>
